import { Progress } from 'antd'
import PropTypes from 'prop-types'
import styles from './styles.module.css'
import { Button, ConfigProvider } from 'antd'
import React from 'react'
import clsx from 'clsx'
import Translate from '@docusaurus/Translate'

const DevProgress = ({ progress, link }) => {
  return (
    <>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#414bb2',
          },
        }}>
        <Progress percent={progress} status="active" />
        <div className={styles.feature_text}>
          <div className="row">
            <div className="col col--6">
              <span>
                <Translate
                  id="component.DevProgress.text.1"
                  description="the text of development progress bar">
                  Feature in development
                </Translate>
              </span>
            </div>
            <div className={clsx('col col--6', styles.button)}>
              <Button
                type="primary"
                shape="round"
                target="_blank"
                href={link}>
                <Translate
                  id="component.DevProgress.text.2"
                  description="the text of development progress bar">
                  Help us
                </Translate>
              </Button>
            </div>
          </div>
        </div>
      </ConfigProvider>
    </>
  )
}
DevProgress.propTypes = {
  progress: PropTypes.number.isRequired,
  link: PropTypes.string.isRequired,
}
export default DevProgress
